<template>
	<view class="category">
		<scroll-view scroll-y="true" class="category-left" :style="'height:' + dataHeight + 'px;'">
			<view @tap="onLeftChange(item.id)" class="category-item" v-for="(item,index) in lv1List" :key="index">
				<view class="category-name" :class="activeId === item.id?'category-name-active':''">
					{{ item.name }}
				</view>
			</view>
		</scroll-view>

		<scroll-view scroll-y="true" class="category-right" :style="'height:' + dataHeight + 'px;'">
			<view class="right-category" v-for="(item,index) in category.children" :key="index">
				<view class="right-category-title">{{ item.name }}</view>
				<view class="right-category-content">
					<view class="right-item" @tap="toProduct(data)" v-for="(data,idx) in item.children" :key="idx">
						<image class="right-img" src="../../static/img/category-img.png" mode=""></image>
						<view class="right-name">{{ data.name }}</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	export default {
		data() {
			return {
				dataHeight: 0,
				activeId: 0,
				lv1List:[],
				// 包含root和所有子类数据
				category: {},
			}
		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.dataHeight = res.windowHeight
				}
			})
		},
		onLoad() {
			this.getCategoryLv1()
		},
		methods: {
			onLeftChange(id) {
				this.activeId = id
				this.categoryTree(id)
			},
			toProduct(item) {
				uni.navigateTo({
					url: '/pages/hotRecommend/hotRecommend?category=' + encodeURI(JSON.stringify(item))
				})
			},
			getCategoryLv1(){
				$http.request({
					url: '/product/category/level1',
					method: 'get',
					loading: true
				}).then(res => {
					this.lv1List = res.data
					this.onLeftChange(res.data[0].id)
				})
			},
			categoryTree(id) {
				$http.request({
					url: `/product/category/tree/${id}`,
					method: 'get',
					loading: true
				}).then(res => {
					if(res.success) {
						this.category = res.data
					}
				})
			}
		}
	}
</script>

<style scoped>
	.category {
		display: flex;
	}
	.category-left {
		// 左侧200rpx
		width: 200rpx;
	}
	.category-right {
		// 右侧占满
		flex: 1;
		padding-left: 30rpx;
	}
	.category-item {
		font-size: 22rpx;
		background-color: #F8F8F8;
	}
	.category-name {
		padding: 30rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: center;
		color: #3D3D3D;
	}
	.category-name-active {
		background-color: #FFFFFF;
		color: #F23030;
	}
	.right-category-title {
		font-weight: bold;
		padding: 30rpx 0;
	}
	.right-category-content {
		display: flex;
		flex-wrap: wrap;
	}
	.right-item {
		width: 150rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10rpx;
	}
	.right-img {
		width: 60rpx;
		height: 60rpx;
	}
	.right-name {
		padding: 16rpx 0;
		text-align: center;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 22rpx;
		color: #3D3D3D;
	}
</style>
